<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body { 
          background-color:transparent;
        }
        
        canvas {
            display: block;
            left: 50%;
            margin: -125px 0 0 -125px;
            position: absolute;
            top: 50%;
        }        

        .container {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;        
        }

        #content {
          margin-top: 280px;
          font-size: 2vw;
          font-weight: bold;
          color: #FFFFFF;
        }

    </style>
</head>
<body>
    <div class="container">
      <canvas id="canvas" width="250" height="250"></canvas> 
      <span id="content">Loading...</span>      
    </div>

    <script>
        // refer Organic Circle from https://uxplanet.org/using-loading-animation-on-websites-and-apps-examples-and-snippets-to-use-cab0097be9f1
        var canvasLoader = function(){
        
        var self = this;
        window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)}}();
        
        self.init = function(){ 
          self.canvas = document.getElementById('canvas');        
          self.ctx = self.canvas.getContext('2d');
          self.ctx.lineWidth = .5;
          self.ctx.strokeStyle = 'rgba(255,255,255,.75)';
          self.count = 75;
          self.rotation = 270*(Math.PI/180);    
          self.speed = 6;
          self.canvasLoop();
        };  
        
        self.updateLoader = function(){
          self.rotation += self.speed/100;                  
        };
        
        self.renderLoader = function(){             
          self.ctx.save();
          self.ctx.globalCompositeOperation = 'source-over';
          self.ctx.translate(125, 125);
          self.ctx.rotate(self.rotation); 
          var i = self.count;
          while(i--){               
            self.ctx.beginPath();
            self.ctx.arc(0, 0, i+(Math.random()*35), Math.random(), Math.PI/3+(Math.random()/12), false);               
            self.ctx.stroke();
          } 
          self.ctx.restore();                     
        };          
        
        self.canvasLoop = function(){
          requestAnimFrame(self.canvasLoop, self.canvas);     
          self.ctx.globalCompositeOperation = 'destination-out';
          self.ctx.fillStyle = 'rgba(255,255,255,.03)';
          self.ctx.fillRect(0,0,250,250);
          self.updateLoader();
          self.renderLoader();
        };
        
      };
      
      var loader = new canvasLoader();
      loader.init();
    </script>   
</body>
</html>